<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{number}}.{{title}}</title>
    <!-- 引入ACE插件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"
        charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"
        charset="utf-8"></script>
    <!-- 引入jquery CDN -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            list-style: none;
            text-decoration: none;
            color: #333333;
        }

        /* strong {
            display: inline-block;
        } */

        .nav_bar {
            height: 50px;
            background-color: #F7F7F7;
        }

        .nav_bar a {
            width: 60px;
            text-align: center;
            line-height: 50px;
            float: left;
        }

        .nav_bar a:hover {
            color: #32CA99;
        }

        .nav_bar .last_li {
            float: right;
        }

        .container .part {
            height: 703px;
            overflow: hidden;
        }

        .container .part .left_desc {
            width: 50%;
            height: 100%;
            float: left;
            color: rgb(102, 102, 102);
            overflow: scroll;
        }

        .container .part .left_desc h4 {
            padding: 10px;
            font-size: 20px;
        }

        /* .left_desc pre .example {
            width: 650px;
            height: 80px;
            line-height: 80px;
            margin: 0 auto;
            background-color: #F7F8F9;
        } */

        /* 102,102,102 */
        .container .part .left_desc pre {
            padding-left: 10px;
            color: rgb(102, 102, 102);
            font-size: 15px;
        }

        .container .part .right_code {
            width: 50%;
            height: 100%;
            float: right;
        }

        .ace_editor {
            height: 520px;
            margin-bottom: 5px;
        }

        .status_line {
            height: 40px;
            line-height: 40px;
        }

        .right_code #result {
            width: 100px;
            height: 35px;
            text-align: center;
            float: left;
            border-radius: 3px;
            margin-left: 7px;
            border: 0;
            background-color: #FFFFFF;
        }

        .right_code #result:hover {
            background-color: #F3F3F6;
        }

        .right_code #input {
            width: 100px;
            height: 35px;
            text-align: center;
            float: left;
            border-radius: 3px;
            border: 0;
            background-color: #FFFFFF;
        }

        .right_code #input:hover {
            background-color: #F3F3F6;
        }

        .right_code .btn1 {
            width: 115px;
            height: 35px;
            float: left;
            margin-left: 330px;
            border-radius: 7px;
            color: #2DB55D;
            background-color: #FFFFFF;
            border-style: solid;
            border-color: #2DB55D;
        }

        /* #269A4F #2DB55D*/
        .right_code .btn2 {
            width: 80px;
            height: 35px;
            float: right;
            margin-right: 7px;
            color: white;
            border-radius: 7px;
            background-color: #2DB55D;
            border: 0;
        }

        .change {
            background-color: #EEFAF7;
            color: #32CA99;
            font-size: 16px;
            font-weight: 600;
            width: 100px;
            height: 35px;
            text-align: center;
            float: left;
            border-radius: 3px;
            margin-left: 7px;
            border: 0;
        }

        .normal {
            width: 100px;
            height: 35px;
            text-align: center;
            float: left;
            border-radius: 3px;
            margin-left: 7px;
            border: 0;
            background-color: #FFFFFF;
        }

        .btn1:hover {
            background-color: #F3F3F6;
        }

        .btn2:hover {
            background-color: #269A4F;
        }

        .answer_box {
            width: 100%;
            height: 130px;
            line-height: 130px;
            color: rgb(102, 102, 102);
            text-align: center;
            display: inline-block;
        }

        .unpass1 {
            font-size: 16px;
            margin-left: 10px;
            margin-top: 10px;
            color: red;
        }

        .unpass2 {
            font-size: 16px;
            margin-left: 10px;
            margin-top: 10px;
            color: red;
            overflow: scroll;
        }

        .origin {
            font-size: 16px;
            margin-left: 10px;
            margin-top: 10px;
            margin: 10px 10px;
            background-color: #F7F8F9;
        }

        .pass {
            height: 50px;
            width: 700px;
            line-height: 50px;
            margin: 10px auto;
            color: #32CA99;
            background-color: #EEFAF7;
            border-radius: 5px;
            font-weight: 600;
            font-size: 20px;
        }

        /* .run_result {} */
    </style>
</head>
<body>
    <div class="nav_bar">
        <a href="/">首页</a>
        <a href="/all_questions">题库</a>
        <a href="#">讨论</a>
        <a href="#">竞赛</a>
        <a href="#">求职</a>
        <a href="#" class="last_li">登录</a>
    </div>
    <div class="container">
        <div class="part">
            <div class="left_desc">
                <h4><span>{{number}}</span>.{{title}}&nbsp&nbsp{{level}}</h4>
                <br>
                <pre>{{desc}}</pre>
            </div>
            <div class="right_code">
                <pre id="code" class="ace_editor"><textarea class="ace_text-input">{{pre_code}}</textarea></pre>
                <div class="status_line">
                    <button id="result">运行结果</button>
                    <button id="input">自测输入</button>
                    <button class="btn1" onclick="submit1()">执行代码</button>
                    <button class="btn2" onclick="submit2()">提交</button>
                </div>
                <div id="answer" class="answer_box">
                    保存并提交之后，这里将会显示运行结果
                </div>
            </div>
        </div>
    </div>
    <script>
        //初始化对象
        editor = ace.edit("code");
        //设置风格和语言（更多风格和语言，请到github上相应目录查看）
        // 主题大全：http://www.manongjc.com/detail/25-cfpdrwkkivkikmk.html
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/c_cpp");
        // 字体大小
        editor.setFontSize(16);
        // 设置默认制表符的大小:
        editor.getSession().setTabSize(4);
        // 设置只读（true时只读，用于展示代码）
        editor.setReadOnly(false);
        // 启用提示菜单
        ace.require("ace/ext/language_tools");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        function submit1() {

        }
        function submit2() {
            // 获取代码
            var code = editor.getSession().getValue();
            console.log(code);
            // 获取题号
            var number = $(".container .part .left_desc h4 span").text();
            console.log(number);
            // 构造判题请求
            var judge_query = "/judge/" + number;
            console.log(judge_query);
            // 发起ajax请求
            $.ajax({
                method: 'Post',
                url: judge_query,
                dataType: 'json',
                contentType: 'application/json;charset=utf-8',

                data: JSON.stringify({
                    'code': code,
                    'input': ''
                }),

                success: function (data) {
                    showDate(data);
                }
            });
        }

        function showDate(data) {
            // 获取result标签
            var result_div = $(".container .part .right_code #answer");
            result_div.empty();
            result_div.removeClass('answer_box');
            // 获取status和reason
            var status = data.status;
            var reason = data.reason;

            if (status == 0) {
                // 运行成功
                var stdout = data.stdout;
                var stderr = data.stderr;
                if (stdout == "通过全部测试用例\n") {
                    var stdout_label = $("<div>", {
                        text: " 通过全部测试用例"
                    });
                    stdout_label.addClass('pass');
                    stdout_label.appendTo(result_div);
                }
                else {
                    console.log('2');
                    var unpass_label = $("<pre>", {
                        text: '未通过'
                    });
                    unpass_label.addClass('unpass1');
                    unpass_label.appendTo(result_div);
                    var stdout_label = $("<pre>", {
                        text: stdout
                    });
                    stdout_label.addClass('origin');
                    var stderr_label = $("<pre>", {
                        text: stderr
                    });
                    stdout_label.appendTo(result_div);
                    // stderr_label.appendTo(result_div);
                }
            }
            else if (status < 0) {
                var reason_label = $("<pre>", {
                    text: '编译错误\n' + reason
                });
                reason_label.addClass('unpass2');
                reason_label.appendTo(result_div);
            }
            else {
                var reason_label = $("<pre>", {
                    text: reason
                });
                reason_label.addClass('unpass1');
                reason_label.appendTo(result_div);
            }
        }
        // 1. 获取元素
        var result = document.getElementById('result');
        // 2. 注册时间
        result.onclick = function () {
            this.className = 'change';
            input.className = 'normal';
        }
        // 1. 获取元素
        var input = document.getElementById('input');
        // 2. 注册时间
        input.onclick = function () {
            this.className = 'change';
            result.className = 'normal';
        }
    </script>
</body>
</html>